<template>
  <div>
    <a-form :model="form" @submit-success="submit">
      <a-card class="mb-2">
        <div class="flex justify-between">
          <div>{{ t["基础信息"] }}</div>
          <div>
            <a-button @click="showForm = false">
              <IconClose />
            </a-button>
          </div>
        </div>
      </a-card>

      <a-card class="mb-2">
        <a-steps changeable :current="step" @change="setCurrent">
          <a-step>{{ t["基础信息"] }}</a-step>
          <a-step>{{ t["选择设备"] }}</a-step>
          <a-step>{{ t["选择时间"] }}</a-step>
        </a-steps>
      </a-card>

      <a-card v-if="step === 1">
        <a-form-item :label="t['广告名称']" field="name" required>
          <a-input v-model="form.name" style="width: 200px"></a-input>
        </a-form-item>
        <a-form-item :label="t['广告区域']">
          <a-card>
            <div class="flex">
              <div class="text-nowrap">{{ t["竖屏"] }}</div>
              <a-radio-group v-model="form.publicizeSize" :options="portraitScreen">
              </a-radio-group>
            </div>
            <div class="flex">
              <div class="text-nowrap">{{ t["横屏"] }}</div>
              <a-radio-group v-model="form.publicizeSize" disabled :options="landscapeOptions">
              </a-radio-group>
            </div>
          </a-card>
        </a-form-item>
        <a-form-item :label="t['广告素材']">
          <a-card :title="t['动态新增']" class="w-full" :body-style="bodyStyle">
            <MaterialSelector
              v-for="(item, key) in form.materials"
              :key="item.id"
              :value="item"
              @upload="upload(key)"
              @del="delMaterial(item.id)"
            />
            <template #extra>
              <a-button @click="addMaterial">{{ t["新增"] }}</a-button>
            </template>
            <a-empty v-if="form.materials.length === 0" />
          </a-card>
        </a-form-item>
      </a-card>

      <a-card v-else-if="step === 2" :title="t['素材']">
        <LcdDeviceSelector v-model:objects="form.objects" v-model:type="form.type" />
        <!-- <div>
          <div class="flex justify-between items-center mb-4">
            <div>
              <a-radio-group
                v-model="form.type"
                type="button"
                :options="translateOptions(objectsOptions, )"
              ></a-radio-group>
            </div>
          </div>

          <div>
            <a-card :body-style="bodyStyle">
              <template v-if="form.type === DeviceTypeEnum.CUSTOM">
                <DeviceSelector :keyword="keyword" />
              </template>
              <template v-else-if="form.type === DeviceTypeEnum.GROUP">
                <Group />
              </template>
              <template v-else>
                <div class="text-center pt-4 text-gray-500">{{ t["已选择全部设备"] }}</div>
              </template>
            </a-card>
          </div>
        </div> -->
      </a-card>

      <a-card v-else-if="step === 3" :title="t['选择时间']" :body-style="bodyStyle">
        <template #title>
          <div>
            <a-radio-group
              v-model="form.timeType"
              :options="translateOptions(planOptions, '定时任务')"
            ></a-radio-group>
          </div>
        </template>
        <div class="flex gap-2 flex-col">
          <div v-if="form.timeType === ScheduleTypeEnum.WEEKLY">
            <WeekPicker v-model="form.week" />
          </div>

          <TimeSelector
            v-for="(item, key) in form.publishTime"
            :key="key"
            :value="item"
            :type="form.timeType"
            @del="delTime(item.id)"
            @update:week="updateWeek"
            :item="item"
            @change="updateItem"
          ></TimeSelector>
        </div>
        <template #extra>
          <a-button @click="addTime">{{ t["新增"] }}</a-button>
        </template>
        <a-empty v-if="form.publishTime.length === 0" />
      </a-card>
      <NextStep v-model:step="step" :loading="table.loading" />
    </a-form>
    <FileSelector v-model:visible="visible" @change="selectFile"></FileSelector>
  </div>
</template>

<script setup lang="ts">
import { Library } from "@/api/service/library/types";
import { createPublicize, updatePublicize } from "@/api/service/publicize";

import FileSelector from "@/views/admin/components/file-selector/FileSelector.vue";
import { nanoid } from "nanoid";

import WeekPicker from "@/components/common/WeekPicker.vue";
import { ScheduleTypeEnum } from "@/enum/system.enum";

import { PublishTime } from "@/api/service/publicize/types";
import { planOptions } from "../../scheduled";
import { list } from "../data/curd";
import { form, resetForm, showForm } from "../data/form";
import { landscapeOptions, portraitScreen } from "../data/options";
import { table } from "../data/table";
import MaterialSelector from "./MaterialSelector.vue";
import NextStep from "./NextStep.vue";
import TimeSelector from "./TimeSelector.vue";

const t = translate("公共模块");
const step = ref(1);
const visible = ref();
const index = ref();
const keyword = ref();
const bodyStyle: any = { height: "400px", "overflow-y": "auto" };
const upload = (key: number) => {
  visible.value = true;
  index.value = key;
};
const setCurrent = (current: number) => {
  step.value = current;
};
const selectFile = (files: Library[]) => {
  form.value.materials[index.value].url = files[0].uri;
};
const updateWeek = (week: string[]) => {
  form.value.publishTime.forEach((e) => {
    e.work = week;
  });
};
const updateItem = (data: PublishTime) => {};
const reset = async () => {
  await list();
  resetForm();
  step.value = 1;
  showForm.value = false;
  table.value.loading = false;
};
const submit = async () => {
  try {
    table.value.loading = true;
    form.value.week = form.value.week?.join(",");
    if (form.value.id) {
      await updatePublicize(form.value);
    } else {
      await createPublicize(form.value);
    }
    reset();
  } catch (error) {
    reset();
  }
};

const addTime = () => {
  form.value.publishTime.push({
    start: "",
    end: "",
    work: [],
    id: nanoid(),
    raw: undefined
  });
};

const addMaterial = () => {
  form.value.materials.push({
    name: "",
    second: 0,
    url: "",
    id: nanoid()
  });
};

const delMaterial = (id: string) => {
  form.value.materials = form.value.materials.filter((e: any) => e.id !== id);
};

const delTime = (id: string) => {
  form.value.publishTime = form.value.publishTime.filter((e: any) => e.id !== id);
};
</script>

<style lang="scss" scoped></style>
